<template>
  <div class="container">
    <HfSuperForm v-bind="searchFormProps" ref="searchFormRef" v-on="searchFormEmits" />
    <HfSuperForm v-bind="diologFormProps" ref="diologFormRef" v-on="diologFormEmits"> </HfSuperForm>
    <HfTable v-bind="tableProps" ref="tableRef" v-on="tableEmits">
    </HfTable>
  </div>
</template>
<script setup lang="ts">
import { pageEmit } from "@/components/HfSuperForm/super-form";
const searchFormRef = ref<ISusEx>();
let searchFormProps = ref<ISusP>({
  formType: "searchForm",
  formOpt: {
    items: {
      menuName: { type: "input", label: "菜单名" }
    }
  }
});
const searchFormEmits: ISusE = {
  emitToOpen: () => pageEmit.emitToOpen({dioRef: diologFormRef,row:{isMenu:true,canUse:true}} ),
  emitGetListFn: ({ fn }) => pageEmit.emitGetListFn({ tableRef, fn, isPageToOne: true, searchFormRef }),
  emitChangeProps: (objd: ISuECommonChangePropsEmitArgue) => pageEmit.emitChangeProps(objd, searchFormProps.value)
};
const diologFormRef = ref<ISudEx>();
let diologFormProps = ref<ISudP>({
  formType: "diologForm",
  formOpt: {
    saveUrl: "/menu",
    items: {
      menuName: { type: "input", label: "菜单名", hasrules: true },
      parentId: { type: "treeSelect", label: "父级菜单",url:'/menu/list' },
      menuIcon: { type: "number", label: "菜单" },
      isMenu: { type: "radio", label: "是否是菜单" ,values:[{id:true,name:'是'},{id:false,name:'否'}]},
      canUse: { type: "radio", label: "状态",values:[{id:true,name:'是'},{id:false,name:'否'}] }
    }
  },
  superFormOpt: { title: "编辑个人信息" }
});
const diologFormEmits: ISudE = {
  emitGetListFn: ({ fn }) => pageEmit.emitGetListFn({ tableRef: tableRef, fn, searchFormRef }),
  emitChangeProps: (objd: ISuECommonChangePropsEmitArgue) => pageEmit.emitChangeProps(objd, diologFormProps.value)
};
const tableRef = ref<ITableEx>();
let tableProps: ITableP = {
  tableOpt: {
    list: { url: "/menu" },
    delete: { url: "/menu" },
    noPage:true,
    columns: [
      { label: "ID", prop: "id" },
      { label: "菜单名", prop: "menuName" },
      { label: "父级菜单名",width:'100px', prop: "parentMenuName" },
      { label: "菜单图标", prop: "menuIcon" },
      { label: "是否是菜单", prop: "isMenu",render:'params',width:'100px' ,Object:[{id:true,name:'是'},{id:false,name:'否'}] },
      { label: "状态", prop: "canUse",render:'params' ,Object:[{id:true,name:'是'},{id:false,name:'否'}]}
    ]
  }
};
const tableEmits: ITableE = {
  emitToOpen: ({ row }: any) => pageEmit.emitToOpen({ dioRef: diologFormRef, row })
};
</script>
